<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="Content-Type" content="multipart/form-data;         charset=utf-8" />
  <link rel="Bookmark" href="favicon.ico">
  <link rel="Shortcut Icon" href="favicon.ico" />
  <!--[if lt IE 9]>
<script type="text/javascript" src="__PUBLIC__/Admin/lib/html5.js"></script>
<script type="text/javascript" src="__PUBLIC__/Admin/lib/respond.min.js"></script>
<![endif]-->
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Admin/static/h-ui/css/H-ui.min.css" />
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Admin/static/h-ui.admin/css/H-ui.admin.css" />
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Admin/lib/Hui-iconfont/1.0.8/iconfont.css" />

  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Admin/static/h-ui.admin/css/style.css" />

  <link rel="stylesheet" href="__PUBLIC__/Jcrop/css/jquery.Jcrop.css">
  <!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script><![endif]-->
  <!--/meta 作为公共模版分离出去-->

  <style>
    .upload-btn {
      width: 130px;
      height: 25px;
      overflow: hidden;
      position: relative;
      border: 3px solid #06c;
      border-radius: 5px;
      background: #0cf;

    }

    .upload-btn:hover {
      background: #09f;
    }

    .upload-btn__txt {
      z-index: 1;
      position: relative;
      color: #fff;
      font-size: 18px;
      font-family: "Helvetica Neue";
      line-height: 24px;
      text-align: center;
      text-shadow: 0 1px 1px #000;
    }

    .upload-btn input {
      top: -10px;
      right: -40px;
      z-index: 2;
      position: absolute;
      cursor: pointer;
      opacity: 0;
      filter: alpha(opacity=0);
      font-size: 50px;
    }
  </style>

  <title>新增图片</title>
  <link href="__PUBLIC__/Admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <include file="header" />
  <include file="aside" />
  <div class="page-container Hui-article-box" style="overflow: auto;">
    <form class="form form-horizontal" id="form-article-add" method="post" enctype="multipart/form-data" action="{:U('Admin/sealAddstep2')}"   >
      <div>


        <div class="js-fileapi-wrapper upload-btn" id="choose">

          <input name="file" type="file" accept="image/png" multiple />
          <button id="btn">上传印章</button>
        </div>
        <div id="images">

          <p style="margin-top: 40px;"></p>

          <div id="img2"></div>

          <!-- <div id="img3"></div> -->
        </div>

      </div>
      <div class="row cl">
        印章名称：
        <input name="tit" id="tit">
      </div>

      <div class="row cl">
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
          <!--<button onClick="return save();" class="btn btn-primary radius" type="submit">-->
                        <!--<i class="Hui-iconfont">&#xe632;</i> 保存并提交-->
                    <!--</button>-->


      <input type="submit" name="next"  class="btn btn-primary radius" onclick=" setp1()"  value="下一步">
       <!--<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>-->
       </div>
       </div>


      <input type="hidden"  name="hi" id="hi" value="">
      <input type="hidden"  name="hijiequ" id="hijiequ" value="">
    </form>
  </div>
  </div>

  <!--_footer 作为公共模版分离出去-->
  <script type="text/javascript" src="__PUBLIC__/Admin/lib/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="__PUBLIC__/Admin/lib/layer/2.4/layer.js"></script>

  <script type="text/javascript" src="__PUBLIC__/Admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
  <script type="text/javascript" src="__PUBLIC__/Admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
  <script type="text/javascript" src="__PUBLIC__/Admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
  <script type="text/javascript" src="__PUBLIC__/Admin/static/h-ui/js/H-ui.js"></script>
  <script type="text/javascript" src="__PUBLIC__/Admin/static/h-ui.admin/js/H-ui.admin.js"></script>

  <script src="__PUBLIC__/Jcrop/js/jquery.Jcrop.js"></script>
  <script src="__PUBLIC__/Jcrop/js/fileapi.js"></script>
  <!--/_footer /作为公共模版分离出去-->

  <!--请在下方写此页面业务相关的脚本-->
  <script type="text/javascript" src="__PUBLIC__/Admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
  <script type="text/javascript">
    //图片上传预览

    var jcropApi;


    $("#img").on("change", function() {
      // Get a reference to the fileList
      var files = !!this.files ? this.files : [];
      // If no files were selected, or no FileReader support, return
      if (!files.length || !window.FileReader) return;
      // Only proceed if the selected file is an image
      if (/^image/.test(files[0].type)) {
        // Create a new instance of the FileReader
        var reader = new FileReader();
        // Read the local file as a DataURL
        reader.readAsDataURL(files[0]);
        // When loaded, set image data as background of div
        reader.onloadend = function() {
          $("#initializationHead").attr("src", this.result);
        }
        console.log(files[0]);
        $('#test').Jcrop({
          allowSelect: true,
          trackDocument: true,
          baseClass: 'jcrop'
        }, function() {
          jcropApi = this;
          jcropApi.setImage('newpic.jpg')
        });
      }
    });





    function checkCoords()
    {
        // if (parseInt($('#hi').val())) return true;
        // layer.msg('请选择印章并截取', {
        //     icon: 5
        // });
        // return false;
    };







    var cropData=new Array();
    var el = $('input').get(0);


    FileAPI.event.on(el, 'change', function(evt) {
      var files = FileAPI.getFiles(evt); // Retrieve file list

      FileAPI.filterFiles(files, function(file, info) {
        if (!/^image/.test(file.type)) {
          alert('图片格式不正确');
          return false;
        } else if (file.size > 20 * FileAPI.MB) {
          alert('图片必须小于20M');
          return false;
        } else {
          return true;
        }

      }, function(files, rejected) {


        if (files.length) {
          var file = files[0];
          var img0 = FileAPI.Image(file);
          var img1 = FileAPI.Image(file);
          var ratio = 0;
          FileAPI.getInfo(file, function(err, info) { //get image ratio
            if (!err) {
              if (info.width > info.height) {
                ratio = info.width / 500;
              } else {
                ratio = info.height / 500;
              }
            }
          });

          img0.resize(500, 500, 'max') //place image and register jcrop
            .get(function(err, img) {
              $('#img2').empty();
              $('#img2').append($(img));

              $('#img2').children().Jcrop({
                aspectRatio: 1,
                bgColor: 'rgba(0,0,0,0.4)',
                onSelect: function(c) {
                  img1.matrix.sx = c.x * ratio;
                  img1.matrix.sy = c.y * ratio;
                  img1.matrix.sw = c.w * ratio;
                  img1.matrix.sh = c.h * ratio;
                  img1.matrix.dw = 500;
                  img1.matrix.dh = 500;

                  console.log(c.x);
                  console.log(c.y);
                  console.log(c.w);
                  console.log(c.h);

                    cropData.push(c.x,c.y,c.w,c.h);
                  // img1.get(function(err, img) {
                  //   // $('#img3').empty();
                  //   //   $('#img3').append($(img));
                  //   $('#img3').html($(img));
                  // });








                }
              });
            });
          $('#btn').on('click', function() {
            FileAPI.upload({
              url: '/testUpFile/upFile',

              files: {
                images: img1
              },
              progress: function(evt) { /* ... */ },
              complete: function(err, xhr) { /* ... */
                //alert(xhr.responseText);

              }
            });

          });

        }
      });
    });










    function setp1() {
        var name=$('#tit').val();

        var cropDataStr=cropData.join(',');
        $("input[name='hi']").attr("value",cropDataStr);

        if((name=="")||(name==null)){
            layer.msg('请输入印章名称', {
                icon: 5
            });
            $('#tit').focus();
            return false;
        }

        if (parseInt($('#hi').val())) return true;
        layer.msg('请选择印章并截取', {
            icon: 5
        });
        return false;


    }






  </script>
</body>

</html>
